<template>
  <div class="workload-report-container">
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <span>实施人员工作量报表</span>
          <el-space>
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              @change="handleDateChange"
            />
            <el-button type="primary" @click="handleExport">
              <el-icon><Download /></el-icon>
              导出报表
            </el-button>
          </el-space>
        </div>
      </template>

      <!-- 统计概览 -->
      <el-row :gutter="20" style="margin-bottom: 20px">
        <el-col :span="6">
          <el-card shadow="hover" class="stat-card">
            <el-statistic title="总工作时长" :value="statistics.totalHours" suffix="小时" />
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="stat-card">
            <el-statistic title="平均工作时长" :value="statistics.avgHours" suffix="小时" />
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="stat-card">
            <el-statistic title="参与项目数" :value="statistics.projectCount" suffix="个" />
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="stat-card">
            <el-statistic title="完成任务数" :value="statistics.taskCount" suffix="个" />
          </el-card>
        </el-col>
      </el-row>

      <!-- 图表区域 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="hover" style="margin-bottom: 20px">
            <template #header>
              <span>人员工作时长排名</span>
            </template>
            <v-chart :option="workloadChartOption" style="height: 400px" />
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover" style="margin-bottom: 20px">
            <template #header>
              <span>工作时长趋势</span>
            </template>
            <v-chart :option="trendChartOption" style="height: 400px" />
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="hover">
            <template #header>
              <span>人员任务完成情况</span>
            </template>
            <v-chart :option="taskChartOption" style="height: 400px" />
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover">
            <template #header>
              <span>人员技能分布</span>
            </template>
            <v-chart :option="skillChartOption" style="height: 400px" />
          </el-card>
        </el-col>
      </el-row>

      <!-- 详细数据表格 -->
      <el-card shadow="hover" style="margin-top: 20px">
        <template #header>
          <span>详细工作量数据</span>
        </template>
        <el-table :data="workloadData" border stripe>
          <el-table-column type="index" label="排名" width="60" align="center" />
          <el-table-column prop="name" label="姓名" width="100" />
          <el-table-column prop="role" label="角色" width="120">
            <template #default="{ row }">
              <el-tag>{{ row.role }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="projects" label="参与项目" width="100" align="center" />
          <el-table-column prop="tasks" label="完成任务" width="100" align="center" />
          <el-table-column prop="hours" label="工作时长" width="120" align="center">
            <template #default="{ row }">
              <el-text type="primary">{{ row.hours }}小时</el-text>
            </template>
          </el-table-column>
          <el-table-column prop="efficiency" label="效率指数" width="100" align="center">
            <template #default="{ row }">
              <el-progress :percentage="row.efficiency" :status="row.efficiency >= 90 ? 'success' : ''" />
            </template>
          </el-table-column>
          <el-table-column prop="skills" label="专业技能" min-width="200">
            <template #default="{ row }">
              <el-tag v-for="skill in row.skills" :key="skill" size="small" style="margin-right: 5px">
                {{ skill }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart, LineChart, PieChart, RadarChart } from 'echarts/charts'
import { 
  TitleComponent, 
  TooltipComponent, 
  LegendComponent, 
  GridComponent 
} from 'echarts/components'
import VChart from 'vue-echarts'
import { ElMessage } from 'element-plus'
import { Download } from '@element-plus/icons-vue'

use([
  CanvasRenderer,
  BarChart,
  LineChart,
  PieChart,
  RadarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

const dateRange = ref(['2024-10-01', '2024-10-31'])

const statistics = reactive({
  totalHours: 3260,
  avgHours: 163,
  projectCount: 15,
  taskCount: 128
})

const workloadData = ref([
  { 
    name: '张伟', 
    role: '项目经理', 
    projects: 3, 
    tasks: 28, 
    hours: 240, 
    efficiency: 95,
    skills: ['项目管理', 'ERP实施', '需求分析']
  },
  { 
    name: '李娜', 
    role: '实施顾问', 
    projects: 4, 
    tasks: 35, 
    hours: 280, 
    efficiency: 92,
    skills: ['系统配置', '用户培训', '数据迁移']
  },
  { 
    name: '王强', 
    role: '技术顾问', 
    projects: 5, 
    tasks: 42, 
    hours: 320, 
    efficiency: 98,
    skills: ['二次开发', '技术支持', '系统集成']
  },
  { 
    name: '赵敏', 
    role: '培训讲师', 
    projects: 3, 
    tasks: 23, 
    hours: 220, 
    efficiency: 88,
    skills: ['用户培训', '知识转移', '文档编写']
  }
])

// 人员工作时长排名图表
const workloadChartOption = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    name: '工作时长(小时)'
  },
  yAxis: {
    type: 'category',
    data: ['赵敏', '张伟', '李娜', '王强']
  },
  series: [
    {
      name: '工作时长',
      type: 'bar',
      data: [220, 240, 280, 320],
      itemStyle: {
        color: '#409EFF'
      },
      label: {
        show: true,
        position: 'right'
      }
    }
  ]
})

// 工作时长趋势图表
const trendChartOption = ref({
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['张伟', '李娜', '王强', '赵敏']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['第1周', '第2周', '第3周', '第4周']
  },
  yAxis: {
    type: 'value',
    name: '工作时长(小时)'
  },
  series: [
    {
      name: '张伟',
      type: 'line',
      data: [55, 60, 62, 63],
      smooth: true
    },
    {
      name: '李娜',
      type: 'line',
      data: [65, 70, 72, 73],
      smooth: true
    },
    {
      name: '王强',
      type: 'line',
      data: [75, 80, 82, 83],
      smooth: true
    },
    {
      name: '赵敏',
      type: 'line',
      data: [50, 55, 57, 58],
      smooth: true
    }
  ]
})

// 任务完成情况图表
const taskChartOption = ref({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '任务完成',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 28, name: '张伟' },
        { value: 35, name: '李娜' },
        { value: 42, name: '王强' },
        { value: 23, name: '赵敏' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
})

// 人员技能分布图表
const skillChartOption = ref({
  tooltip: {},
  legend: {
    data: ['张伟', '李娜', '王强', '赵敏']
  },
  radar: {
    indicator: [
      { name: '项目管理', max: 100 },
      { name: '技术能力', max: 100 },
      { name: '沟通能力', max: 100 },
      { name: '执行力', max: 100 },
      { name: '学习能力', max: 100 }
    ]
  },
  series: [
    {
      name: '技能评分',
      type: 'radar',
      data: [
        {
          value: [95, 80, 90, 88, 85],
          name: '张伟'
        },
        {
          value: [70, 85, 92, 90, 88],
          name: '李娜'
        },
        {
          value: [65, 98, 75, 95, 92],
          name: '王强'
        },
        {
          value: [75, 70, 95, 80, 85],
          name: '赵敏'
        }
      ]
    }
  ]
})

const handleDateChange = () => {
  ElMessage.info('日期范围已更新')
}

const handleExport = () => {
  ElMessage.success('报表导出成功')
}
</script>

<style scoped>
.workload-report-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-card {
  text-align: center;
}
</style>

